<template>
  <div>
    <div>
      <div class="search-box">
        <input type="text" placeholder="案例库:搜项目or医生关键词" />
        <button>
          <van-icon name="search" />
        </button>
      </div>
      <div class="container">
      <van-tabs v-model="active" class=".paging_list">
          <van-tab title="精选">
             <ul class="paging_list">
                <li class="commodity" v-for="item in commodity" :key="item.id">
                  <img :src="item.image" />
                  <div class="Pro-intro text-overflow ">{{ item.name }}</div>
                  <div class="Pro-vol">
                    <span>用户名称</span>
                    <span class="right">50</span>
                  </div>
                </li>  
              </ul>
              </van-tab>
          <van-tab title="微整">
            <ul class="paging_list">
                <li class="commodity" v-for="item in commodity" :key="item.id">
                  <img :src="item.image" />
                  <div class="Pro-intro">{{ item.name }}</div>
                  <div class="Pro-vol">
                    <span>用户名称</span>
                    <span class="right">50</span>
                  </div>
                </li>  
              </ul>
          </van-tab>
          <van-tab title="鼻部">
            <ul class="paging_list">
                <li class="commodity" v-for="item in commodity" :key="item.id">
                  <img :src="item.image" />
                  <div class="Pro-intro text-overflow ">{{ item.name }}</div>
                  <div class="Pro-vol">
                    <span>用户名称</span>
                    <span class="right">50</span>
                  </div>
                </li>  
              </ul>
          </van-tab>
          <van-tab title="眼部">
            <ul class="paging_list">
                <li class="commodity" v-for="item in commodity" :key="item.id">
                  <img :src="item.image" />
                  <div class="Pro-intro text-overflow ">{{ item.name }}</div>
                  <div class="Pro-vol">
                    <span>用户名称</span>
                    <span class="right">50</span>
                  </div>
                </li>  
              </ul>
          </van-tab>
          <van-tab title="瘦身">
            <ul class="paging_list">
                <li class="commodity" v-for="item in commodity" :key="item.id">
                  <img :src="item.image" />
                  <div class="Pro-intro text-overflow ">{{ item.name }}</div>
                  <div class="Pro-vol">
                    <span>用户名称</span>
                    <span class="right">50</span>
                  </div>
                </li>  
              </ul>
          </van-tab>
          <van-tab title="瘦脸">
            <ul class="paging_list">
                <li class="commodity" v-for="item in commodity" :key="item.id">
                  <img :src="item.image" />
                  <div class="Pro-intro text-overflow ">{{ item.name }}</div>
                  <div class="Pro-vol">
                    <span>用户名称</span>
                    <span class="right">50</span>
                  </div>
                </li>  
              </ul>
          </van-tab>
        <div class="release" @click="loginEvt">
          <span> <img src="../../assets/01.png" alt=""></span>
          <p>发布日期</p>
        </div>
      </van-tabs>
      </div>
      <tebber :active="active"></tebber>
    </div>
  </div>
</template> 

<script>
import tebber from "@/components/tabber";



export default {
  journal:[],
  name: "",
  props: {},
  components: {
    tebber,
  },
  data() {
    return {
        active: 1,
        list:[],
        commodity: []
    };
  },
  methods: {
    loginEvt(){
      this.$router.push('/Publishpage2')
    },
    // productClass(){
    //   this.$api.productClass({
    //   }).then(res=>{
    //     if(res.code == 200){
    //       console.log(res);
    //       this.list = res.data.slice(0,10)
    //     }
    //   })
    // }
     getGoodsList(e) {
      this.$api
        .getGoodsList({
          limit: 20,
          page: this.page,
          where: {
            city_id: 6,
          },
        })
        .then((res) => {
          if (res.code == 200) {
            // console.log(res.data);
            if (e) {
              this.commodity = this.commodity.concat(res.data);
            } else {
              this.commodity = res.data;
            }
            this.$emit("setLoading", false);
            console.log(this.commodity);
          }
        });
    },
  },

  created() {
    // this.getLogList()
    // this.productClass()
    this.getGoodsList()
  },

  mounted() {},

  computed: {},

  watch: {},
};
</script>

<style lang='scss' scoped>

.search-box {
  width: 100%;
  height: 3.43rem;
  background: linear-gradient(129deg, #2fb6a5 0%, #30ccb5 100%);
  border-radius: 0rem 0rem 1.35rem 1.35rem;
  padding: 0.65rem 0.86rem;
  position: relative;
  input {
    width: 100%;
    height: 1.95rem;
    border: none;
    border-radius: 1.08rem;
    background: #ffffff;
    outline: none;
    font-size: 0.65rem;
    color: #bcbcbc;
    line-height: 0.89rem;
    padding-left: 1.08rem;
  }
  button {
    position: absolute;
    background: #ffffff;
    border: none;
    right: 1.8rem;
    top: 1rem;
    cursor: pointer;
  }
}
.container {
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  .paging_list{
    overflow: hidden;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
   
    li{
    margin-top: 1rem;
    width: 10rem;
    height: 11.14rem;
    background: #fff;
       img {
        width: 100%;
        height: 5.95rem;
      }
      .Pro-intro {
        padding: 0.54rem;
        font-size: 0.76rem;
        height: 2.5rem;
        font-weight: 500;
        color: #333333;
        //省略
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .Pro-vol {
        position: relative;
        span {
          font-size: 0.54rem;
          padding: 0.54rem;
          color: #909090;
        }
        .right{
          position: absolute;
          right: 0;
          bottom: -8px;
        }
      }
    }
  } 
}
.release{
  width: 5rem;
  height: 5rem;
  background: #fff;
  position: fixed;
  bottom: 6rem;
  right: 1rem;
  border-radius: 50%;
  span{
    position: absolute;
    width: 2rem;
    height: 2rem;
    left: 0;
    right: 0;
    top: 1rem;
    margin: 0 auto;
    // background: url('../../images/jia.png') center center / 2rem 2rem no-repeat;
    img{

      width: 2rem;
      height: 2rem;
    }
  }
  p{
    position: absolute;
    bottom: 1rem;
    width: 100%;
    text-align: center;
    font-size: 13px;
  }
}

</style>